<template>
  <div class="good-recommend">
    <div class="goods-top-menu">
      <div class="goods-menu-left">
        <div class="all-check">
          <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
            >全选</el-checkbox
          >
        </div>
        <div class="client-view">
          <el-select
            v-model="style_id"
            placeholder="风格分类"
            @change="selectType"
          >
            <el-option
              v-for="item in styleList"
              :key="item.style_id"
              :label="item.style_name"
              :value="item.style_id"
            ></el-option>
          </el-select>
        </div>
        <div class="client-view">
          <el-select v-model="class_id" placeholder="品类" @change="selectType">
            <el-option
              v-for="item in classList"
              :key="item.class_id"
              :label="item.class_name"
              :value="item.class_id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="goods-menu-right">
        <refresh-button @refresh="refreshPage"></refresh-button>
        <search-view
          :option="searchOption"
          @value="goSearch"
          @clear="refreshPage"
        ></search-view>
      </div>
    </div>
    <div class="goods-list">
      <div class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <div class="goods-checkbox">
          <el-checkbox
            v-model="item.checkbox"
            @change="onChange(item)"
          ></el-checkbox>
        </div>
        <div class="goods-content" @click="checkboxClick(item)">
          <ImgPopover
            style="margin-top: 5px"
            :src="item.image_middle"
          ></ImgPopover>
          <div class="text-info">
            <el-tooltip
              placement="top"
              effect="light"
              :content="item.goods_name"
            >
              <p class="goods-name">{{ item.goods_name }}</p>
            </el-tooltip>
            <el-tooltip placement="top" effect="light" :content="item.goods_sn">
              <p class="goods-sn">商品编号：{{ item.goods_sn }}</p>
            </el-tooltip>
            <p class="add-time">上架时间：{{ item.add_time }}</p>
            <div class="text-bottom">
              <p style="color: red">¥{{ item.retail_price }}</p>
              <p style="color: #ef8200">人气：{{ item.click }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pages">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="init"
        :current-page="page"
      ></el-pagination>
    </div>
    <div style="padding: 20px 10px">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="addFabricClick">确 定</el-button>
    </div>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
export default {
  components: {
    ImgPopover,
  },
  props: {
    layerid: {
      type: String,
      default: "",
    },
    recommend_good: {
      type: String,
      default: "",
    },
    num: {
      type: String,
      default: "double",
    },
    factory_id: {
      type: Number,
      default: 0,
    },
    id: {
      type: Number,
      default: 0,
    },
		isVideo: {
			type: Boolean,
			default: false
		},
  },
  data() {
    return {
      selectGoodsList: [],
      admin_id: localStorage.getItem("admin_id"),
      checkAll: false,
      total: 0,
      page: 0,
      classSelect: 0, // 分类搜索
      selectContent: "", // 搜索输入框的值
      searchOption: [
        { value: 0, label: "型号" },
        { value: 1, label: "商品ID" },
        { value: 2, label: "商品名" },
      ],
      styleList: [],
      classList: [],
      style_id: "",
      class_id: "",
      goodsList: [],
    };
  },
  methods: {
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
        is_sale: 1,
        is_goods: 1,
        store_id: localStorage.getItem("store_id"),
        style_id: this.style_id,
        class_id: this.class_id,
        order_by: "add_time",
      };

      if (this.admin_id == 3) {
        data.factory_id = localStorage.getItem("factory_id");
        data.factory_sn = localStorage.getItem("factory_sn");
      }

      if (this.style_id == 0) {
        delete data.style_id;
      }
      if (this.class_id == 0) {
        delete data.class_id;
      }

      if (this.classSelect == 0) {
        data.keyword = this.selectContent;
      } else if (this.classSelect == 1) {
        data.goods_id = this.selectContent;
      } else if (this.classSelect == 2) {
        data.keyword = this.selectContent;
      }
      this.onCountCheck();
      if (this.factory_id) {
        data.factory_id = this.factory_id;
      }
      this.$http(this.$ApiList.GoodsList, data).then((res) => {
        this.total = res.datas.count;
        this.goodsList = res.datas.data.map((item) => {
          this.$set(item, "checkbox", false);
          return item;
        });
        let checkboxNums = 0;
        this.goodsList.forEach((item, index) => {
          this.selectGoodsList.forEach((data) => {
						if(this.isVideo){
							if (data.goods_id == item.goods_id) {
								checkboxNums++;
								this.$set(this.goodsList[index], "checkbox", true);
            	}
						}else{
							if (data == item.goods_sn) {
								checkboxNums++;
								this.$set(this.goodsList[index], "checkbox", true);
            	}
						}
          });
        });
        if (checkboxNums === 10) {
          this.checkAll = true;
        }
      });
    },
    async addFabricClick() {
      // this.goodsList.forEach(item => {
      // 	if (item.checkbox) {
      // 		this.selectGoodsList.push(item.goods_sn);
      // 	}
      // });
      if (this.num == "double") {
        this.onPushItem();
      } else {
        this.onCountCheck();
      }
      if (this.selectGoodsList.length == 0) {
        this.$layer.msg("至少选择一件商品");
        return;
      }
      if (this.num == "one") {
        if (this.selectGoodsList.length > 1) {
          this.$layer.msg("补货或换货不可多选");
          return;
        }
      }
      this.checkAll = false;
      this.onSetChange();
      if (!this.factory_id) {
				if(this.isVideo){
					this.$parent.setGoodsId(this.selectGoodsList);
				}else{
					this.$parent.setGoodsId(this.selectGoodsList.join(","));
				}
        this.$layer.msg("选择成功");
      } else {
        await this.$http(this.$ApiList.seniorFactoryGoodsAdd, {
          senior_factory_id: this.id,
          goods_ids: this.selectGoodsList.join(","),
        });
        this.$layer.msg("关联成功");
        this.$parent.init();
      }
      this.cancel();
    },
    checkboxClick(item) {
      if (item.checkbox) {
        item.checkbox = false;
      } else {
        item.checkbox = true;
      }
    },
    refreshPage() {
      this.checkAll = false;
      this.page = 1;
      this.style_id = "";
      this.selectContent = "";
      this.classSelect = "";
      this.class_id = "";
      this.init();
    },
    selectType() {
      this.init();
    },
    getClassify() {
      // 风格
      this.$http(this.$ApiList.StyleList).then((res) => {
        this.styleList = res.datas;
      });
      // 品类
      this.$http(this.$ApiList.ClassList).then((res) => {
        this.classList = res.datas.reverse();
      });
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    cancel() {
      this.$layer.close(this.layerid);
    },
    handleCheckAllChange() {
      this.onSetChange();
      if (this.checkAll) {
        this.goodsList.forEach((item) => {
          item.checkbox = true;
        });
      } else {
        this.goodsList.forEach((item) => {
          item.checkbox = false;
          this.selectGoodsList.forEach((data, index) => {
            if (data == item.goods_sn) {
              this.selectGoodsList.splice(index, 1);
            }
          });
        });
      }
    },
    // 去除重复的产品
    onCountCheck() {
      this.onPushItem();
      this.onSetChange();
    },
    onPushItem() {
      this.goodsList.forEach((item) => {
        if (item.checkbox) {
          if (this.num == "double") {
						if(this.isVideo){
							this.selectGoodsList.push(item);
							return
						}
            this.selectGoodsList.push(String(item.goods_sn));
          } else {
            this.selectGoodsList.push(String(item.goods_id));
          }
        }
      });
    },
    onChange(item) {
      if (this.num == "double") {
				if(this.isVideo){
					this.selectGoodsList.forEach((data, index) => {
						if (data.goods_id == item.goods_id) {
							this.selectGoodsList.splice(index, 1);
						}
					});
					return
				}
        this.selectGoodsList.forEach((data, index) => {
          if (data == item.goods_sn) {
            this.selectGoodsList.splice(index, 1);
          }
        });
      } else {
        this.selectGoodsList.forEach((data, index) => {
          if (data == item.goods_id) {
            this.selectGoodsList.splice(index, 1);
          }
        });
      }
    },
    // 去除重复
    onSetChange() {
      if (this.selectGoodsList.length) {
        this.selectGoodsList = Array.from(new Set(this.selectGoodsList));
      }
    },
  },
  created() {
    if (this.recommend_good) {
      this.selectGoodsList = this.isVideo?this.recommend_good:this.recommend_good.split(",");
      this.init();
    } else {
      this.init();
    }
    this.getClassify();
  },
};
</script>
<style lang="scss">
.good-recommend {
  padding: 20px 20px;
  .goods-top-menu {
    display: flex;
    .goods-menu-left {
      flex: 1;
      display: flex;
    }
    .goods-menu-right {
      flex: 2;
      display: flex;
      display: flex;
      flex-direction: row-reverse;
    }
    .all-check {
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .client-view {
      margin-right: 10px;
      width: 120px;
    }
  }
  .pages {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .goods-list {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    .goods-checkbox {
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
    }
    .goods-item {
      padding: 15px 10px;
      margin-top: 10px;
      margin-right: 10px;
      display: flex;
      width: 370px;
      height: 140px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      cursor: pointer;
      box-sizing: border-box;
      .goods-content {
        display: flex;
        .img-popover img {
          width: 100px !important;
          height: 100px !important;
        }
      }
    }
    .text-info {
      width: 210px;
      margin-left: 10px;
      .goods-name,
      .goods-sn {
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .add-time {
        line-height: 30px;
      }
    }
    .text-bottom {
      display: flex;
      line-height: 30px;
    }
    .text-bottom p {
      flex: 1;
    }
  }
}
</style>
